<template>
  <div class="a">
    <!-- <p class="title">城镇天气预报</p> -->
    <div class="data">
      <span>日期：</span>
      <el-date-picker
        v-model="value1"
        type="date"
        @change="a"
        placeholder="选择日期"
      >
      </el-date-picker>
    </div>
    <div class="data">
      <span>时次：</span>
      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div class="data">
      <span>时效：</span>
      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div class="btns">
      <el-button>查看</el-button>
      <el-button>清除</el-button>
      <el-button>向前</el-button>
      <el-button>向后</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="站点名称"> </el-table-column>
      <el-table-column prop="name" label="温度"> </el-table-column>
      <el-table-column prop="address" label="风力"> </el-table-column>
      <el-table-column prop="address" label="风向"> </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value1: "",
      options: [],
      value: "",
      tableData: [],
    };
  },
  methods: {
    a() {
      console.log("11");
    },
  },
};
</script>
<style scoped lang="less">
.a {
  pointer-events: all;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  font-size: 10px;
  align-items: center;
  .data {
    margin: 10px auto;
  }
  .btns {
    padding: 10px;
  }
  .el-table {
    margin-top: 10px;
  }
}
</style>
